<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="checklogin.jsp"%>
<head>
	<base href="<%=basePath%>">
	<link rel="stylesheet" type="text/css" href="layui/dist/css/layui.css">
	<script type="application/javascript" src="layui/dist/layui.all.js"></script>
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="application/javascript" src="js/jq.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/orderr.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<!-- header -->
<div class="head-top"></div>

<!-- 导航栏-->
<%@include file="header.jsp"%>
<br>
<!-- 轮播图-->
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<div class="carousel slide" id="carousel-example-generic" data-ride="carousel" data-interval="1500">
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>
				<div class="carousel-inner">
					<div class="item active">
						<img src="images/meat.jpg" style="width: 100%;height: 600px">
					</div>
					<div class="item">
						<img src="images/egg.jpg" style="width: 100%;height: 600px">
					</div>
					<div class="item">
						<img src="images/haixian.jpg" style="width: 100%;height: 600px">
					</div>
				</div>
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right"></span>
				</a>
			</div>
		</div>
	</div>
</div>



<!-- 店铺缩略-->
<div class="latis">
	<div class="container">
		<h1>热门店铺</h1>
		<div class="col-md-4 latis-left" name="threeshop">
			<ul name="shopid" style="display: none">店铺编号 </ul>
			<h3>Maecenas ornare enim</h3>
			<img src="" class="img-responsive" alt="">
			<div class="special-info grid_1 simpleCart_shelfItem">
				<p>Cum sociis natodiculus mus.rhoncus egestas ac sit </p>
				<div class="cur">
					<div class="cur-left">
						<div class="item_add"><span class="item_price"><a class="morebtn hvr-rectangle-in" href="#">进入店铺</a></span></div>
					</div>
					<div class="cur-right">
						<div class="item_add"><span class="item_price"><h6></h6></span></div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="col-md-4 latis-left" name="threeshop">
			<ul name="shopid" style="display: none">店铺编号 </ul>
			<h3>Dis parturient montes</h3>
			<img src="" class="img-responsive" alt="">
			<div class="special-info grid_1 simpleCart_shelfItem">
				<p>Cum sociis natodiculus mus.rhoncus egestas ac sit </p>
				<div class="cur">
					<div class="cur-left">
						<div class="item_add"><span class="item_price"><a class="morebtn hvr-rectangle-in" href="#">进入店铺</a></span></div>
					</div>
					<div class="cur-right">
						<div class="item_add"><span class="item_price"><h6></h6></span></div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="col-md-4 latis-left " name="threeshop">
			<ul name="shopid" style="display: none">店铺编号 </ul>
			<h3>Curabitur congue blandit</h3>
			<img src="" class="img-responsive" alt="">
			<div class="special-info grid_1 simpleCart_shelfItem">
				<p>Cum sociis natodiculus mus.rhoncus egestas ac sit </p>
				<div class="cur">
					<div class="cur-left">
						<div class="item_add"><span class="item_price"><a class="morebtn hvr-rectangle-in" href="#">进入店铺</a></span></div>
					</div>
					<div class="cur-right">
						<div class="item_add"><span class="item_price"><h6></h6></span></div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="clearfix"> </div>


	</div>

</div>

<!-- 商品推荐-->
<div class="magnust">
	<div class="container">
		<h3>热门商品</h3>
		<div class="col-md-4 magnust-top" name="threemenu">

			<div class="magnust-left">
				<img src="" alt="">
			</div>
			<div style="padding-left: 20px" class="magnust-right">
				<h4></h4>
				<p> Lorem Ipsum passage, and going through the cites of the undoubtable source. Lorem sections</p>

			</div>

			<div class="clearfix"><button style="margin-left: 100px"  class="morebtn hvr-rectangle-in btn btn-success">加入</button> </div>
		</div>
		<div class="col-md-4 magnust-top" name="threemenu">
			<div class="magnust-left">
				<img src=""  alt="">
			</div>
			<div style="padding-left: 20px" class="magnust-right">
				<h4></h4>
				<p> Lorem Ipsum passage, and going through the cites of the undoubtable source. Lorem sections</p>
			</div>

			<div class="clearfix"><button style="margin-left: 100px" class="morebtn hvr-rectangle-in btn btn-success">加入</button></div>
		</div>
		<div class="col-md-4 magnust-top" name="threemenu">
			<div class="magnust-left">
				<img src="" alt="">
			</div>
			<div style="padding-left: 20px" class="magnust-right">
				<h4></h4>
				<p> Lorem Ipsum passage, and going through the cites of the undoubtable source. Lorem sections</p>
			</div>

			<div class="clearfix"><button style="margin-left: 100px" class="morebtn hvr-rectangle-in btn btn-success">加入</button> </div>
		</div>
		<div class="clearfix"> </div>
	</div>
</div>
<!-- magnust -->
<!-- footer-->
<%@include file="footer.jsp"%>



<%@include file="modal.jsp"%>
<!-- 模态框-->

</body>
<script>
	var layer,form;
	// 加载layui组件
	layer=layui.layer;
	form=layui.form;
	begin('<%=path%>');
	//初始化点单事件

	//热门店铺展示所需要的ajax
	$.ajax({
		type: "GET",
		url: '<%=path%>/selectsthreeshop',
		//发送请求
		dataType:'json',
		success: function (result) {
			//解析数据将填充数据
			for(var i=0;i<result.data.length;i++){
				//页面上有三个name=threeshop的div都是已经展示好的模板,接下来都是填充数据
				var x=$("div[name=threeshop]").get(i);
				//选中页面上三个name=threeshop的div通过for循环的i来控制其中具体的一个
				$(x).find("img").attr("src",result.data[i].shop_img_url).css({ height: "250px", width: "400px" });
				//将返回的商品的图片相对地址链接赋值给其中的src属性并限制其长宽
				$(x).find("h3").text(result.data[i].shop_name);
				//将返回的商品的名字赋值给h3
				$(x).find("p").text(result.data[i].shop_value);
				//将返回的商品的简介填充
				$(x).find("h6").text("评分:"+result.data[i].score)
				//将返回的商品的评分填充
				$(x).find("a").attr("href","<%=path%>/turnshoppage?shop_id="+result.data[i].shop_id)
				//给包括button的ahref赋值链接让其点击的时候会直接跳转到对应的页面店铺
			}
		},
		error: function(data) {

			//暂时不考虑失败的回调函数
		}

	});


	//热门商品展示所需要的ajax
	$.ajax({
		type: "GET",
		url: '<%=path%>/threemenu',
		dataType:'json',
		success: function (result) {
			//同上面的店铺只展示一样
			//这里只写不同的代码
			for(var i=0;i<result.data.length;i++){
				var x=$("div[name=threemenu]").get(i);
				$(x).find("img").attr("src",result.data[i].dish_img_url).css({ height: "200px", width: "200px" });
				$(x).find("h4").text(result.data[i].dish_name);
				$(x).find("p").text("价格:"+result.data[i].price);
				$(x).find("button").attr("dish_id",result.data[i].dish_id);
				//给按钮赋值dish_id属性,为了之后点击这个按钮时能携带上正确的菜品id
			}
		},
		error: function(data) {
		}

	});
	$("div[name=threemenu]").on("click","button",function () {
		//选定父元素是三个热门商品最外边的div 再绑定他其中的 后代元素 button 附上鼠标点击事件
		$.ajax({
			type: "GET",

			url: `<%=path%>/adddish?dish_id=${$(this).attr("dish_id")}`,
			//每次点击都会携带上按钮本身所携带的dish_id
			dataType:'json',
			success: function (result) {
				//后台会返回正确格式的json对象后直接跳入success回调函数
				//再弹出加入成功的提示
				layer.msg("加入成功",{
					icon:1,
					time: 2000 //2秒关闭（如果不配置，默认是3秒）
				})
			},
			error: function(data) {
			}
		});



	})
	//点击购物车图片触发点击事件
	$("#buy").on("click",function () {
		//运行ordermenu初始化购物车函数
		ordermenu('<%=path%>')
		//给id=buybtn 的按钮触发点击事件开启模态框
		$("#buybtn").click();

	})

</script>
</html>